<template>
<el-container style="height: 50px; border: 1px solid #eee" direction=vertical> 
    <el-header style = "text-align: right;" >
      <span style="font-size:20px;float: left;">基于vue构建的前后端分离项目</span>
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span style="font-size: 12px">王小虎</span>
    </el-header>
  <el-container >
    <el-aside width="200px" >
    <el-menu :default-openeds="['1']" :unique-opened='true' :router='true'  :default-active="currentActiveIndex">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>h5im系统管理</template>
          <el-menu-item index="/home/user">用户</el-menu-item>
          <el-menu-item index="/home/group">群组</el-menu-item>
          <el-menu-item index="/home/msg">消息</el-menu-item>
      </el-submenu>
       <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>storm项目应用</template>
        <el-menu-item index="2-1">用户</el-menu-item>
        <el-menu-item index="2-2">群组</el-menu-item>
        <el-menu-item index="3-3">消息</el-menu-item>
      </el-submenu>
      <el-submenu index="3"> 
        <template slot="title"><i class="el-icon-setting"></i>系统信息设置</template>
        <el-menu-item index="3-1">用户</el-menu-item>
        <el-menu-item index="3-2">群组</el-menu-item>
        <el-menu-item index="3-3">消息</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
  <el-main>
      <router-view></router-view>
  </el-main>
  </el-container>
</el-container>
</template>

<style>
  .el-header {
    background-color: #409EFF;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;

  }
</style>

<script>
export default{
 computed: {
        currentActiveIndex() {
            //计算当前在哪个路由
            const path = this.$route.path;
            return path
        },
    },
 }
</script>
